To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add cards to our Vue app.
Cards
In Bootstrap, cards are a flexible and extensible content container.
It can gold header, footer, and content.
The background colors can also be changed.
To add a card, we can use the b-card component.
For instance, we can write:
<template>
<div id="app">
<b-card
title="Card Title"
img-src="https://placekitten.com/g/600/200"
img-alt="cat"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>a cat</b-card-text>
<b-button href="#" variant="primary">Go</b-button>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the b-card component with a few props.
The img-src is the URL for an image.
img-alt is the alt attribute for the image.
style has the styles for the card.
class has the class for the card.
b-card-text has the content for the card.
title has the title for the card.
img-top indicates that the card image is at the top of the card.
We also have a button with the link.
We can also place thre image at the bottom with image-bottom .
To add a reader, we can use the header prop.
Likewise, we can add the footer prop for the footer.
We can add a header and footer by writing the following:
<template>
<div id="app">
<b-card
header="header"
header-tag="header"
footer="footer"
footer-tag="footer"
title="title"
>
<b-card-text>Header and footers</b-card-text>
<b-button href="#" variant="primary">Go</b-button>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We just add the props the place we expect them to be added in the b-card component to add headers and footers.
Horizontal Layout
We don’t have to stick with a vertical layout.
We can also create a card with a horizontal layout with b-row and b-col for layout.
For instance, we can write:
<template>
<div id="app">
<b-card no-body class="overflow-hidden">
<b-row no-gutters>
<b-col md="6">
<b-card-img src="https://placekitten.com/200/50" alt="cat"></b-card-img>
</b-col>
<b-col md="6">
<b-card-body title="Horizontal Card">
<b-card-text>card</b-card-text>
</b-card-body>
</b-col>
</b-row>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have b-col to divide up the card into 2 halves.
md with value 6 means that we have a left column and a right column.
no-body means that we don’t let BootstrapVue add the card body automatically.
Instead, we used b-card-body to place the body of the card.
b-row makes sure that the b-col components stay in the row.
Text Variants
We can change the text string with the bg-variant prop.
For instance, we can write:
<template>
<div id="app">
<b-card bg-variant="dark" text-variant="white" title="title">
<b-card-text>more content</b-card-text>
<b-button href="#" variant="primary">Go</b-button>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We set bg-variant to 'dark' to make the background dark gray.
title is still the card title.
text-variant is the styling for the card text, which we change to white.
Other variants include primary, secondary, success, info, warning, danger, light, and dark.
Bordered
We can add borders to our cards.
To do that, we use the border-variant prop.
For instance, we can write:
<template>
<div id="app">
<b-card border-variant="warning" header="header" header-border-variant="warning" align="center">
<b-card-text>lorem ipsum.</b-card-text>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the header prop to set the header text.
header-border-variant to set the border style of the header.
border-variant is used to set the border style of the body.
Header and Footer variants
Headers and footers have their own variants.
We can set them with the header-bg-variant and footer-bg-variant respectively.
Those will set the background color.
There’s also the header-border-variant and footer-border-variant props to set the border styles of the header and footer.
Nav Integration
We can add navbar integration into a card by using the b-nav component.
To add a navbar to a card, we can write:
<template>
<div id="app">
<b-card title="Ctitle" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>active</b-nav-item>
<b-nav-item>inactive</b-nav-item>
<b-nav-item disabled>disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
lorem ipsum.
</b-card-text>
<b-button variant="primary">go</b-button>
</b-card>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We just put the b-nav component in the template tag to add the navbar.
It’s put into the header slot as indicated by the v-slot:header directive.
We have the active prop to set a link to be active.
If there’s no active prop set then it’s inactive.
If there’s a disabled prop, then it’s disabled.
Conclusion
There are many things that we can do with cards.
We can style it, change the layout, and add a navbar to it.
